Science Stream Practicals

Std 12th IT Subject - Skill Oriented Practical (Science Stream)

SOP 1: Creation of Website using HTML5

Create a website using HTML5 and CSS using any 4 CSS properties. Write a code for 2 separate pages having different file names such as first page as index.html and second page as page2.html. Use any theme such as college profile or company profile etc. Every page must contain proper Meta information and design web page as follows:

The index page must contain a heading which is highest among other text on pages and must be at centre of the page. There must be a paragraph which introduces general information about the theme chosen. It must have at least 3 physical style tags and one image with alternate text. This page must be connected to other page with proper navigational links.
The 2nd page must contain the feedback or enrolment form related with theme chosen with features of HTML5. The form must contain text element and email address of the company or person. Include the submit button.

Source Code: index.html

<!doctype html>
<html>
<head>
    <title>Home Page</title>
    <style>
        h1 {
            text-align: center;
            background-color: blue;
            color: white;
            font-family: 'Times New Roman';
        }
    </style>
    <meta name="description" content="Information of School">
    <meta charset="UTF-8">
</head>
<body>
    <h1>Don Bosco High School & Junior College, Oros</h1>
    <center>
        <img src="School.jpg" alt="School image" height="300" width="400">
    </center>
    <p><b>Don Bosco High School, Oros</b> is an <u>English medium</u> school run by the <i>Salesians of Don Bosco.</i> This institution is primarily for Catholics, established and administered by the Catholic Church but it is open to all irrespective of religion, caste or creed.</p>
    <a href="page2.html">Go to fill Enrolment form</a>
</body>
</html>

Source Code: page2.html

<!doctype html>
<html>
<head>
    <title>Application Form</title>
    <style>
        h1 {
            text-align: center;
            background-color: blue;
            color: white;
            font-family: 'Times New Roman';
        }
    </style>
    <meta name="description" content="Enrolment Form">
    <meta charset="UTF-8">
</head>
<body>
    <h1>Enrolment Form</h1>
    <form>
        Enter Your Name: <input type="text" name="t1"><br><br>
        Enter Contact No: <input type="tel" pattern="[0-9]{2}-[0-9]{10}" placeholder="00-0000000000" name="t2"><br><br>
        Enter Email ID: <input type="email" name="e1"><br><br>
        <input type="submit" value="Submit"><br><br>
        <a href="index.html">Back to home page</a>
    </form>
</body>
</html>

SOP 1: Creation of Website using HTML5

Source Code: index.html

Source Code: page2.html

Live Interactive Preview